<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 400px;
            height: 500px;
            background: pink;
            margin: 100px auto;
            position: relative;
        }

        /* 产品图 */
        .pic_list li {
            width: 398px;
            height: 398px;
            border: 1px solid black;
            display: none;
        }

        .pic_list li:nth-of-type(1) {
            background: url("image/pic/pic1.jpg") no-repeat center/100% 100%;
        }

        .pic_list li:nth-of-type(2) {
            background: url("image/pic/pic2.jpg") no-repeat center/100% 100%;
        }

        .pic_list li:nth-of-type(3) {
            background: url("image/pic/pic3.jpg") no-repeat center/100% 100%;
        }

        .pic_list li:nth-of-type(4) {
            background: url("image/pic/pic4.jpg") no-repeat center/100% 100%;
        }

        .pic_list li.show {
            display: block;
        }

        /* 蒙版 */
        .pic_list .shadow {
            width: 100px;
            height: 100px;
            background: rgba(200, 200, 200, 0.5);
            position: absolute;
            display: none;
            cursor: move;
        }


        /* 小缩览图 */
        .min_pic li {
            width: 78px;
            height: 78px;
            float: left;
            margin: 10px;
            border: 1px solid black;
            cursor: pointer;
        }

        .min_pic li:hover {
            border: 1px solid yellow;
            /* animation: fangda .5s linear; */
        }

        .min_pic li.red {
            border: 1px solid yellow;
        }

        @keyframes fangda {
            from {
                transform: scale(1);
            }

            50% {
                transform: scale(1.5);
            }

            to {
                transform: scale(1);
            }
        }

        .min_pic li:nth-of-type(1) {
            background: url("image/pic/pic1.jpg") no-repeat center/100% 100%;
        }

        .min_pic li:nth-of-type(2) {
            background: url("image/pic/pic2.jpg") no-repeat center/100% 100%;
        }

        .min_pic li:nth-of-type(3) {
            background: url("image/pic/pic3.jpg") no-repeat center/100% 100%;
        }

        .min_pic li:nth-of-type(4) {
            background: url("image/pic/pic4.jpg") no-repeat center/100% 100%;
        }

        /* 放大的图 */
        .pic_big {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: absolute;
            top: 0;
            left: 400px;
            overflow: hidden;
            display: none;
        }

        .pic_big li {
            width: 1600px;
            height: 1600px;
            display: none;
            position: absolute;
        }

        .pic_big li.show {
            display: block;
        }

        .pic_big li:nth-of-type(1) {
            background: url("image/pic/pic1.jpg") no-repeat 0 0/100% 100%;
        }

        .pic_big li:nth-of-type(2) {
            background: url("image/pic/pic2.jpg") no-repeat 0 0/100% 100%;
        }

        .pic_big li:nth-of-type(3) {
            background: url("image/pic/pic3.jpg") no-repeat 0 0/100% 100%;
        }

        .pic_big li:nth-of-type(4) {
            background: url("image/pic/pic4.jpg") no-repeat 0 0/100% 100%;
        }
    </style>
    <script src="../jquery-1.11.3/jquery.min.js"></script>
</head>

<body>
    <div class="wrap">
        <!-- 上边的大图 -->
        <ul class="pic_list">
            <li class="show"></li>
            <li></li>
            <li></li>
            <li></li>
            <div class="shadow"></div>
        </ul>
        <!-- 下边的缩略图 -->
        <ul class="min_pic">
            <li class="red"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 放大的图 -->
        <ul class="pic_big">
            <li class="show"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
<script>
    $(function () {
        var index=0;
        //  tab切换
        $(".min_pic li").click(function () {
            // 小缩览图的切换
            $(this).toggleClass("red").siblings().removeClass("red");
            index = $(this).index();
            // 产品的切换
            $(".pic_list li").eq(index).fadeIn().siblings().fadeOut(0);
            // 放大图片的切换
            $(".pic_big li").eq(index).show(0).siblings().hide(0);
        })

        // 鼠标跟随
        $(".pic_list").hover(function () {
            // 鼠标移入
            $(".pic_list .shadow,.pic_big").show();
        }, function () {
            // 鼠标移除
            $(".pic_list .shadow,.pic_big").hide();
        });
        // 鼠标移动，放大的图片同时移动   大图移动的距离是产片图的4倍  相反方向  -4*
        $(".pic_list").mousemove(function (ev) {
            // console.log(ev.offsetX,ev.offsetY)
            // console.log($(this).offset())
            // x:鼠标指针相对于产片图盒子 水平方向的偏移
            // y:鼠标指针相对于产片图盒子 垂直方向的偏移
            var x = ev.pageX - $(this).offset().left;
            var y = ev.pageY - $(this).offset().top;

            // 判断水平方向的  移动
            if (x < 50) {
                // 当鼠标移动到左边缘时
                $(".pic_list .shadow").css({
                    "left": 0
                });
            } else if (x > 350) {
                // 当鼠标移动到右边缘时
                $(".pic_list .shadow").css({
                    "left": "300px"
                });
            } else {
                $(".pic_list .shadow").css({
                    "left": x - 50 + "px"
                });
                // 指定是哪一张大图
                $(".pic_big li").eq(index).css("left",-(x-50)*4+"px");
            }
            // 判断垂直方向的  移动
            if (y < 50) {
                // 当鼠标移动到上边缘时
                $(".pic_list .shadow").css({
                    "top": 0
                });
            } else if (y > 350) {
                // 当鼠标移动到下边缘时
                $(".pic_list .shadow").css({
                    "top": "300px"
                });
            } else{
                $(".pic_list .shadow").css({
                    "top": y - 50 + "px"
                });
                $(".pic_big li").eq(index).css("top",-(y-50)*4+"px")
            }
        })
    })
</script>

</html>